import React, { Component } from 'react'
import axios from "axios"
import Clacss from "../scss/Classify.module.scss"
/* 引入antd组件 */
import { SearchBar } from 'antd-mobile';

export default class Search extends Component {
    state = {
        message: [],
        num: 0
    }
    componentDidMount() {
        // axios.get("https://www.linweiqin.cn/api/public/v1/categories").then(res => {
        //     this.setState({
        //         mesage: res.data.message
        //     })
        // })
    }
    backTohome = () => {
        window.history.back()
    }
    /* 跳转详情页 */
    linkProduct = (pid) => {
        // 1. 进行路由跳转
        this.props.history.push("product/" + 155);
    }
    /* 搜索商品 */
    /* 防抖设置 */
    timer = null
    schGoods = (val) => {
        if (this.timer) {
            clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
            axios.get("https://www.linweiqin.cn/api/public/v1/goods/qsearch",
                {
                    params: { query: val }
                }).then(res => {
                    if (res.data.message) {
                        this.setState({
                            message: res.data.message
                        })
                    }

                })
        }, 1000)
    }
    /* 清除商品 */
    canclegoods = () => {
        this.setState({
            message: []
        })
    }
    render() {
        console.log("Search组件进入加载")
        return (
            <div className={Clacss.claduct}>
                {/* 主页头部 */}
                <div className={Clacss.claHeader}>
                    <div className={Clacss.claHeaderLef} onClick={this.backTohome}><span className="iconfont claback">&#xe66e;</span></div>
                    <div className={Clacss.claHeaderCen}>搜索</div>
                    <div className={Clacss.claHeaderRig}><span></span></div>
                </div>
                {/* 主体部分 */}
                <SearchBar placeholder="搜索商品" onChange={this.schGoods} className={Clacss.schInp} />
                {
                    this.state.message.length >= 1 ? (
                        <div className={Clacss.Schgoods}>
                            {this.state.message.map((value, index) => {
                                return (
                                    <li key={value + index}>{value.goods_name}</li>
                                )
                            })}
                        </div>
                    ) : null
                }
            </div>
        )
    }

}
